<template>
    <div class="container">
        <div class="info">
            <div class="hjxx" v-for="item in  MessageList" :key="item.id" @click="toBargain(item.shop_id,item.counter_id,item.type)">
                <ul>
                    <li>
                        <div class="content">
                            <img src="@/assets/imgs/hjxx.png" alt="">
                            <div class="right">
                                <div class="title">{{item. title}}</div>
                                <div class="detail">{{item.msg}} {{getTime(item.date)}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <router-link :to="{path:'/remind',query:{id:$route.query.id}}">
            <div class="jytx">
                <ul>
                    <li>
                        <div class="content">
                            <img src="@/assets/imgs/jytx.png" alt="">
                            <div class="right">
                                <div class="title">交易提醒</div>
                                <div class="detail">您的【老牛嘟嘟嘟|69级】已下架 12-06</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            </router-link>
            <router-link :to="{path:'/email',query:{id:$route.query.id}}">
            <div class="xtyj">
                <ul>
                    <li>
                        <div class="content">
                            <img src="@/assets/imgs/xtyj.png" alt="">
                            <div class="right">
                                <div class="title">系统邮件</div>
                                <div class="detail">【康猪猪|69级】已重新上架 18小时前</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            </router-link>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name:'MsgMessage',
    data(){
        return{
            MessageList:{}
        }
    },
    methods:{
        getTime(time){
            var dateTime=new Date(time);   
            return dateTime.getFullYear()+'-'+(dateTime.getMonth()+1)+'-'+dateTime.getDate();

        }, 
        toBargain(id,counter_id,type){
            if(type=="还价"){
                this.$router.push({
                name: 'Bargain',
                query: {id: id, counter_id: counter_id}
                })
            }else if(type=="卖家还价"){
                 this.$router.push({
                name: 'Result',
                query: {id: id, counter_id: counter_id}
                })

            }
            
        }
    },
    mounted(){  
        axios.post("http://81.68.253.206:8081/page/getMessageList",{},{
            headers: {
                'token': localStorage.getItem("UserToken") }
        }
        ).then(res=>{
        if(res.data&&res.data.data&&res.data.status){
            this.MessageList=res.data.data;
        }
        })
    },                   
}
</script>
<style lang="scss" scoped>
.container{
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    .info{
        margin-top: rem(145);
        width: 100%;
        background-color: #fff;
        padding: 0 rem(40);
        li{
            width: 100%;
            height: rem(250);
            border-bottom: 1px solid #f5f5f5;
            .content{
                display: flex;
                padding-top: rem(50);
                width: 100%;
                height: rem(250);
                
                img{                 
                    width: rem(150);
                    height: rem(150);
                }
                .right{
                    flex: 1;
                    margin-left: rem(30);
                    .title{
                        margin-top: rem(10);
                        width: 100%;
                        height: rem(60);
                        font-size: rem(42);
                    }
                    .detail{
                        width: 100%;
                        margin-top: rem(15);
                        height: rem(60);
                        font-size: rem(36);
                        color: #888;
                    }
                }

            }
           

        }
      
    }
}


</style>
